const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 使用代码分包以及 vendor 文件名代入 hash 供以 web 服务器缓存
module.exports = (env) => {
  // 使用环境变量
  console.log('Production: ', env.production) // true
  return {
    // 生产环境将默认使用 TerserPlugin 来压缩并且混淆代码
    mode: env.production ? 'production' : 'development',
    entry: {
      index: './src/index.js'
    },
    output: {
      // 文件名带 hash
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      // 在每次构建前清理 /dist 文件夹
      clean: true
    },
    plugins: [
      // 用来生成 dist/index.html 的
      // 所有的 output 的 bundle 会自动添加到 html 中。
      new HtmlWebpackPlugin({
        title: 'Caching'
      })
    ],

    optimization: {
      // 使 splitChunks 的 vendor hash 未经变化时锁定, 不随 index.js 的修改而修改.
      moduleIds: 'deterministic',
      // 将 runtime 代码拆分为一个单独的 chunk
      runtimeChunk: 'single',
      // 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
      // 因此通过实现以上步骤，利用 client 的长效缓存机制，命中缓存来消除请求，并减少向 server 获取资源，同时还能保证 client 代码和 server 代码版本一致
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  }
}
